<template name="pull">
	<view>
	
		<scroll-view scroll-y class="page">
			
			<cu-custom bgColor="bg-gradual-purple" :isBack="true"><block slot="backText">返回</block>
				<block slot="content">打卡</block>
			</cu-custom>	
				
				
				<block slot="content" bgColor="#fcf"><view style="width: 240upx;height: 60upx; ;"></view></block>
			
			<!-- dialog-->
				
						
						<view class="padding-xl">
							<form> 
							<view class="cu-form-group">
								<view class="title" >昵称：</view>
								<text>{{nickName}}</text>
							</view>
							<view class="cu-form-group">
								<view class="title" >打卡任务：</view>
			 <view class='cu-tag'  :class="'bg-green'" >{{name}}</view>
									</view>
								
							<view class="cu-form-group">
								<view class="title">持续时间</view>
								<input v-model="duration" placeholder=""  name="min" 
								  type="digit" maxlength="3" style="text-align: right;" value="0" ></input>
								<view class="cu-capsule radius">
									<view class='cu-tag bg-green '>
										分
									</view>
								</view>
							</view>
							
							<view class="cu-form-group">
								<view class="title">持续次数</view>
								<input type="number" v-model="count" maxlength="3"  
								name="count" style="text-align: right;"  
							></input>
								<view class="cu-capsule radius">
									<view class='cu-tag bg-green '>
										次
									</view>
								</view>
							</view>
							<view class="cu-form-group">
								<textarea maxlength="-1"  v-model="description"  
								 placeholder="学习收获"></textarea>
							</view>
							
							<button class="margin-top cu-btn round lg"   
							     :class="['bg-yellow', 'shadow']"  @tap="postdata" :loading="loading">提交</button>
							</form>
							
						</view> 
			 
		</scroll-view>
	</view>
</template>

<script>
export default {
	name: 'pull',
	data() {
		return {
			name:'',
			nickName:'',
			duration:0,
			count:0,
			description:'',
			loading:false
			}
	},
	onLoad(query) {
		this.name = query.name;
		this.nickName = query.nickName;
	},
	methods: {
	
		postdata(form) {
				// uni.setStorage({key:'name',data:this.nickName})
				uni.setStorage({key:'nickName',data:this.nickName})
				uni.setStorage({key:'description',data:this.description})
				var that = this;
				uni.request({
				    // url: 'http://localhost:8081/service/request', 
					url: '/service/request',
					method:'POST',
				    data: {
				        nickName:  this.nickName,
						name : this.name,
						description: this.description,
						duration: this.duration,
						count: this.count
				    },
				    success: (res) => {
						uni.showModal({
								title: '',
								content: res.data,
								mask:true,
								success: function (res) {
									if (res.confirm) {
										// console.log('用户点击确定');
										that.modalName = null
										// window.location.reload();
									} 
								}
							});
				    },
					fail() {
						uni.showModal({
								title: '',
								content: res.data,
								mask:true,
							});
					}
				});
		
			},
	}
}
</script>

<style>
.page {
	height: 100vh;
	background-color: #fff;
}

.cardTitle {
	color: #fff;
	padding: 90upx 60upx;
	font-size: 40upx;
	font-weight: 300;
	transform: skew(-10deg, 0deg);
	position: relative;
	text-shadow: 0px 0px 6upx rgba(0, 0, 0, 0.3);
}

.cardTitle::before {
	content: '';
	position: absolute;
	width: 60upx;
	height: 6upx;
	border-radius: 20upx;
	background-color: #fff;
	display: block;
	top: 60upx;
	left: 50upx;
	transform: skew(10deg, 0deg);
}

.cardTitle::after {
	content: '';
	position: absolute;
	width: 140upx;
	border-radius: 6upx;
	height: 24upx;
	background-color: #fff;
	display: block;
	bottom: 76upx;
	left: 90upx;
	transform: skew(10deg, 0deg);
	opacity: 0.1;
}
</style>
